<template>
    <div class="cimrts-panel">
        <!-- <div class="panel-left" >
            <div class="left-arrow" title="上一页"></div>
        </div> -->
        <div class="panel-center1" ref="items">
            <div v-for="(item, index) in menuList" :key="index" class="panel-item">
                <div v-if="!item.type" class="panel-list" :title="item.name" @click="clickComponent(item)"
                    @mouseenter.stop="enterComponent(item)" @mouseleave.stop="leaveComponent(item)"
                    :class="{ 'active': item.status === 'active', 'hover': item.status === 'hover', 'none': isDisabled }">
                    <img :src="setIcon(item)" alt="">
                </div>
                <div v-if="item.type" class="divider"></div>
            </div>
        </div>
        <!-- <div class="panel-right">
            <div class="right-arrow" title="下一页"></div>
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const props = withDefaults(defineProps<{
    isDisabled?: boolean
    menuList: any,
}>(), {
    menuList: [],
    isDisabled: false,
});
const emits = defineEmits(["clickComponent"]);

// 设置图片
const setIcon = (item: any) => {
    switch (item.status) {
        case "none":
            return item.icon;
        case "active":
            return item.activeIcon;
        case "hover":
            return item.hoverIcon;
        default: return undefined

    }
}

// 鼠标移入组件
const enterComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "hover"
}

// 鼠标移出组件
const leaveComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "none"

}

// 鼠标点击组件
const clickComponent = (item: any) => {
    if (props.isDisabled) return
    if (item.isOnly) props.menuList.map((e: any) => (e.id != item.id) && e.isOnly && (e.status = "none"))
    emits('clickComponent', item)
}

const items = ref<any>(null)

function setScroolFun() {
    // 添加监听事件
    items.value.addEventListener('mousewheel', handlerMouserScroll, false)//滚轮事件
}
function handlerMouserScroll(event: any) {
    if (!items.value) return;
    //获取滚轮跨距，兼容获取方式
    let detail = event.wheelDelta || event.detail || event.wheelDeltaY

    /*反向*/
    let moveForwardStep = -1
    /*正向*/
    let moveBackStep = 1
    let step = 0
    //如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
    step = detail > 0 ? moveForwardStep * 50 : moveBackStep * 50
    /*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
    items.value.scrollLeft = items.value.scrollLeft + step

    //平滑值(越小越慢，不能小于等于0)
    let slipNum = 0.05
    //末尾值（越小，则越平稳，越大越仓促）
    let endNum = 0.5
    /*递减步伐值*/
    let decreasingPaceNum = step
    /*速度*/
    let paceNum = 10;

    let t = setInterval(() => {
        if (!items.value) return;
        if (Math.abs(decreasingPaceNum) < endNum) {
            clearInterval(t)
            return
        }
        decreasingPaceNum = decreasingPaceNum * slipNum
        items.value.scrollLeft = items.value.scrollLeft + decreasingPaceNum
    }, paceNum)
}

watch(items, () => {
    if (!items.value) return;
    setScroolFun()
})

</script>

<style scoped>
.cimrts-panel {
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    user-select: none;
}

.panel-right,
.panel-left,
.panel-list {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-right,
.panel-left {
    cursor: pointer;
}

.panel-center1 {
    width: 100%;
    /* height: 46px; */
    /* display: grid;
    grid-auto-flow: column; 
    overflow-x: auto;
    gap: 0 2px;*/
    display: flex;
    gap: 0 1px;
    flex-flow: row wrap;

    justify-content: flex-start;

}

.panel-list {

    border-radius: 3px;
    cursor: pointer;

}

.panel-list>img {
    width: 20px;
    height: 20px;
}

.active {
    background-color: #537cfe;
}

.hover {
    background-color: #cfd8f3;
}

.none {
    /* pointer-events: none; */
}


:deep(.el-carousel__arrow) {
    display: none;
}

.left-arrow {
    width: 12px;
    height: 12px;
    background: url("@/assets/cimrts/baseInfo/left_arrow.png") no-repeat;
    background-size: 100% 100%;
}

.left-arrow:hover {
    background: url("@/assets/cimrts/baseInfo/left_arrow_actived.png") no-repeat;
    background-size: 100% 100%;
}

.right-arrow {
    width: 12px;
    height: 12px;
    background: url("@/assets/cimrts/baseInfo/right_arrow.png") no-repeat;
    background-size: 100% 100%;
}

.right-arrow:hover {
    background: url("@/assets/cimrts/baseInfo/right_arrow_actived.png") no-repeat;
    background-size: 100% 100%;
}

.panel-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider {
    height: 27px;
    width: 2px;
    background-color: #8a8a8a;
}
</style>